<template>
  <div class="mui-popover mui-popover-action slg-order-detail">
    <header id="header" class="auto-rem mui-bar mui-bar-nav">
      <a class="mui-icon mui-icon-left-nav mui-pull-left" @tap.prevent.stop="closeConfirm"></a>
      <h1 class="mui-title">
        订单详情
      </h1>
    </header>
    <div class="mui-content">
      <div id="orderdetailscroll" class="mui-scroll-wrapper" style="padding-bottom: 2rem;">
        <div class="mui-scroll">
          <div v-if="Object.keys(usercontact).length > 0" class="contact">
            <div class="contact-top">
              <div class="user">收货人 : {{usercontact.name}}</div>
              <div class="phone">{{usercontact.phone}}</div>
            </div>
            <div class="contact-bottom">
              {{usercontact.province}} {{usercontact.city}} {{usercontact.district}} {{usercontact.address}}
            </div>
          </div>
          <div class="shop-cart mui-card">
            <div class="mui-card-header">
              <span>订单列表</span>
            </div>
            <div class="mui-card-content">
              <div class="mui-card-content-inner">
                <div v-if="detail.length > 0" class="order-item" v-for="{ product, num, sku } in detail">
                  <div class="order-list item-content">
                    <div class="content-left"
                         :style="'background-image: url(' + webApiDomain + '/public/uploads/' + product.file.savepath + product.file.savename + ');'"></div>
                    <div class="content-right">
                      <span class="product-info right-text">{{ product.name }}</span>
                      <span class="sku right-text"></span>
                      <div class="right-footer">
                        <template v-if="product.is_score == 1">
                          <div v-if="product.full_score_buy == 0" class="price">￥{{ (sku.old_price / 100).toFixed(0)
                            }}
                            <span class="score">+ 积分{{ (sku.discount_price / 100).toFixed(0) }}</span>
                          </div>
                          <div v-else class="price score">积分{{ (sku.discount_price / 100).toFixed(0) }}</div>
                        </template>
                        <template v-else>
                          <div class="price">￥{{ (sku.price / 100).toFixed(0) }}</div>
                        </template>

                        <div class="num"> x{{ num }} </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="order-info">
            <div class="row">
              <span class="left">商品金额</span>
              <span class="right">￥{{(this.totalprice / 100).toFixed(0)}}</span>
            </div>
            <div class="row">
              <span class="left">所需积分</span>
              <span class="right">{{(this.totalscore / 100).toFixed(0)}}</span>
            </div>
            <div class="row">
              <span class="left">可获得积分</span>
              <span class="right">{{(this.score / 100 * 10).toFixed(0)}}</span>
            </div>
            <div class="row">
              <span class="left">现金券抵扣</span>
              <span class="right">-￥{{(this.use_cash / 100).toFixed(0)}}</span>
            </div>
            <div class="row last">
              <span class="left">实付款</span>
              <span class="right">￥{{(this.realPay / 100).toFixed(0)}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="order_status != -1" class="detail-nav-bar">
      <button type="button" class="mui-btn mui-btn-outlined" @tap.prevent.stop="cancelOrder">取消订单</button>
      <button type="button" v-if="pay_status != 1" class="mui-btn mui-btn-outlined" @tap.prevent.stop="payOrder(2)">
        微信付款
      </button>
      <button type="button" v-if="pay_status != 1" class="mui-btn mui-btn-outlined" @tap.prevent.stop="payOrder(4)">
        余额付款
      </button>
    </div>
  </div>
</template>

<script>
  import {apiDomain, ajax, callWechatPay} from 'assets/js/Lib'
  import 'assets/js/url';

  export default {
    data() {
      return {
        usercontact: {},
        delivery: {},
        detail: [],
        totalprice: 0,
        totalscore: 0,
        use_score: 0,
        use_cash: 0,
        pay_status: 0,
        order_status: 0,
        score: 0,
      }
    },
    computed: {
      webApiDomain: function () {
        return apiDomain;
      },
      realPay: function () {
        return this.totalprice + this.totalscore - this.use_cash - this.use_score
      }
    },
    watch: {
      orderid: function () {
        if (this.orderid > 0) {
          ajax({
            url: '/api/order/detail',
            type: 'GET',
            data: {id: this.orderid},
            success: res => {
              this.usercontact = res.contact
              this.detail = res.detail
              this.totalprice = res.totalprice
              this.totalscore = res.totalscore
              this.use_cash = res.use_cash
              this.use_score = res.use_score

              let score = 0;
              res.detail.forEach((item) => {
                score += item.sku.score;
              });
              this.score = score;
            }
          })
        }
      }
    },
    props: {
      orderid: 0
    },
    //实例初始化最之前，无法获取到data里的数据
    beforeCreate() {
    },
    //在挂载开始之前被调用
    beforeMount() {
    },
    //已成功挂载，相当ready()
    mounted() {
      mui('#orderdetailscroll').scroll({
        scrollY: true, //是否竖向滚动
        scrollX: false, //是否横向滚动
        startX: 0, //初始化时滚动至x
        startY: 0, //初始化时滚动至y
        indicators: false, //是否显示滚动条
        deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
        bounce: true //是否启用回弹
      });

      // ajax({
      //     url: '/api/order/detail',
      //     type: 'GET',
      //     data: { id: 441 },
      //     success: res => {
      //         this.usercontact = res.contact
      //         this.detail = res.detail
      //         this.totalprice = res.totalprice
      //         this.totalscore = res.totalscore
      //         this.use_cash = res.use_cash
      //         this.use_score = res.use_score
      //     }
      // })
    },
    //相关操作事件
    methods: {
      closeConfirm: function () {
        let params = url('?');
        if (params && params.right_now && params.right_now == 1) {
          window.history.back();
        } else {
//          mui('.slg-cart-confirm').popover('hide');
          mui('.slg-order-detail').popover('hide');
        }
      },
      cancelOrder: function () {
        ajax({
          url: '/api/order/cancel',
          type: 'GET',
          data: {id: this.orderid},
          success: res => {
            this.order_status = res.status;
            window.history.back();
          },
        })
      },
      payOrder(payment) {
        if (payment == 4) {
          ajax({
            url: '/api/order/pay',
            type: 'GET',
            data: {
              id: this.orderid,
              payment_id: payment
            },
            dataType: 'json',
            success: (res) => {
              console.log('res', res);
              if (res.status == 0) {
                mui.toast(res.msg);
              } else {
                mui.toast('支付成功');
                setTimeout(() => {
                  window.location.href = '/views/slghome.html';
                }, 500);
              }
            },
            error: (err) => {
              mui.toast('支付失败');
            }
          })
        } else if (payment == 2) {
          ajax({
            url: '/api/pay/wxpay/index?type=1&id=' + this.orderid,
            type: 'GET',
            success: (res) => {
              callWechatPay(res, () => {
                setTimeout(() => {
                  window.location.href = '/views/slghome.html';
                }, 500);
              });
            }
          })
        }

      },
    }
  }
</script>

<style lang="less">
  .mui-popover.mui-popover-action.slg-order-detail {
    width: 100%;
    height: 100%;
    border-radius: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    background-color: #efeff4;
    transform: translate3d(100%, 0, 0);
    &.mui-active {
      transform: translate3d(0, 0, 0);
    }

    .mui-scroll-wrapper {
      margin: 0;
    }

    .auto-rem.mui-bar-nav.mui-bar {
      box-shadow: 0 1px 6px #ccc;
    }
  }

  .contact {
    width: 100%;
    position: relative;
    top: 0;
    background-color: #fff;
    padding: .2rem 0;
    overflow: hidden;
    margin-top: .3125rem;
    & > div {
      width: 100%;
      line-height: .8rem;
      text-align: left;
    }

    .contact-top {
      overflow: hidden;
      font-size: .4rem;
      padding: 0 .975rem;
      opacity: .8;
      .user {
        float: left;
      }
      .phone {
        float: right;
      }
    }

    .contact-bottom {
      padding: 0 .975rem;
      font-size: .333333333rem;
      opacity: .5;
    }
  }

  .order-item {
    margin-top: .4rem;
    &:first-child {
      margin: 0;
    }
  }

  .order-list.item-content {
    width: 8.75rem;
    overflow: hidden;
    .content-left {
      float: left;
      background: rgba(0, 0, 0, .03);
      background-size: cover !important;
      width: 2.5rem;
      height: 2.5rem;
      background-position: top center;
      background-repeat: no-repeat;
      margin: 0 auto;
    }

    .content-right {
      float: left;
      transition: width .5s;
      width: 6.25rem;
      height: 2.5rem;

      .product-info {
        float: left;
      }

      .right-text {
        width: 100%;
        height: .92rem;
        padding: 0 0.3333333333rem;
        font-size: .3333333333rem;
        color: #333333;
        overflow: hidden;
        line-height: .46rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        word-break: break-all;

        &.sku {
          height: .5rem;
          line-height: .475rem;
          font-size: .3733333333rem;
          -webkit-line-clamp: 1;
          opacity: .5;
          float: left;
        }
      }

      .right-footer {
        width: 100%;
        padding: 0 0.3333333333rem;
        margin-top: .2rem;
        float: left;
        overflow: hidden;

        .price {
          font-size: .4266666667rem;
          line-height: .4266666667rem;
          color: #f23030;
          float: left;
          font-weight: 600;

          &.score {
            font-size: 1em;
            color: #333333;
          }
        }

        .score {
          font-size: .333333333rem;
          color: #333333;
        }

        .num {
          float: right;
          font-size: .3366666667rem;
          line-height: .4266666667rem;
          opacity: .5
        }
      }
    }
  }

  .order-info {
    width: 100%;
    margin-top: .2rem;
    background-color: #fff;
    padding: 6px 15px;
    .row {
      overflow: hidden;
      .left {
        float: left;
      }
      .right {
        float: right;
        color: #FF0036;
      }
      span {
        line-height: 28px;
        font-size: 17px;
      }

      &.last {
        padding-top: .3rem;
        box-sizing: content-box;
        &:before {
          position: absolute;
          right: 0;
          left: 0;
          height: 1px;
          content: '';
          -webkit-transform: scaleY(.5);
          transform: scaleY(.5);
          background-color: #c8c7cc;
          opacity: .5;
          bottom: 1.2rem;
        }
      }
    }
  }

  .detail-nav-bar {
    width: 10rem;
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    z-index: 2;
    height: 1.2rem;
    padding: .15rem 0;
    box-shadow: 0 1px 6px #ccc;
    overflow: hidden;
    button {
      float: right;
      margin-right: .2rem;
    }
  }
</style>